/* 
* @Author: kong
* @Date:   2018-02-12 17:34:13
* @Last Modified by:   anchen
* @Last Modified time: 2018-03-14 22:24:49
*/
;(function(factory){
    if(typeof define === 'function' && define.amd){
        define(['jquery','lodash'],factory);
    }else if (typeof exports !== 'undefined') {
        // For Node.js or CommonJS.
        var _ = require('lodash');
        var $ = require('jquery');
        module.exports = factory($, _);   
    }else{
         factory(jQuery,_);
    }   
}(function($,_){
    //防冲突处理，如果原型链上有，将之移给old变量
    var old = $.fn.rightContentFrame;
    //构造函数
    var RightContentFrame=function RightContentFrame(element,options){
      var self=this;
        this.$element = $(element);
        this.options = $.extend({},$.fn.rightContentFrame.defaults,options);
        this.init();
        
        
    };

    // 定义原型
    RightContentFrame.prototype ={
        // 初始化
        init:function(){
            this.typeObjectFun();
            this.rightStyleTitleHtml();
             
            

        },
        typeObjectFun:function(){
            var obj={
                "input":"inputType",
                "group":"groupType",
                "pageselect":"pageselectType"

            };
            this.typeObject=obj;
        },
        rightStyleTitleHtml:function(){
            this.$element.empty();
            var isAnimate=this.options.isAnimate
            var html='';
            html+='<div class="container_title" id="rightStyleTitle">'
                +'<ul>'
                    +'<li tabValue="moduleProperty" class="active">组件属性</li>'
                    +'<li  tabValue="moduleStyle" style="display:'+(isAnimate ? 'block' : 'none')+'">组件样式</li>'
                    +'<li tabValue="moduleAnimation">组件动画</li>'
                +'</ul>'
            +'</div>';
            this.$element.append(html);
            this.rightSideContentHtml();
        },
        rightSideContentHtml:function(){
            var html='<div class="container_content rightSideContent" id="rightSideContent">';
            html+=this.modulePropertyHtml();
            html+=this.moduleStyleHtml();
            html+=this.moduleAnimationHtml();

            // html+='<div class="container_content rightSideContent" id="rightSideContent">'
            
            // +'<div boxTab="moduleAnimation">组件动画</div>'
        html+='</div>';
        this.$element.append(html);
        },
        modulePropertyHtml:function(){
            var html='';
            html+='<div boxTab="moduleProperty" class="active">'
         
                  html+=this.modulePropertyInitDom(this.options.rightContentData) 
                html+='</div>';

            return html;
        },
        modulePropertyInitDom:function(objData){
            // console.log(json)
            var html='<div class="styleConfig">'
                        +'<form class="editorForm">'
                            +'<div class="container-fluid">'
                                +'<div class="row">';

            html +=this.generatemodulePropertyDom(objData.fields,objData.template);    

            html+=              '</div>'
                            +'</div>'
                        +'</form>'
                    +'</div>';
                    return html;
        },
        generatemodulePropertyDom:function(fieldsJson,template){
            var html='';
            html+=this.getTypeTemplate(fieldsJson,template);
            return html;
        },
        getTypeTemplate:function(fieldsJson,templateType){
            var html='';
            switch(templateType){
                case "layoutFrame":
                    
                   html+=this.inputType(fieldsJson.value)
                    break;
                case "pathNav" :
                    html+=this.groupType(fieldsJson.datas)
                    break;
                
            };
            return html;
        },

        generateLayoutFrameHtml:function(){

        },
        pageselectType:function(){
            var html='';
            html+=`<div class="form-group col-xs-12">
                    <label class="col-xs-4 control-label">链接</label> 
                    <div class="col-xs-8"> 
                      <div class="btn-group bootstrap-select field form-control">
                        <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="page" title="无" aria-expanded="true"><span class="filter-option pull-left">无</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
                        <div class="dropdown-menu open" role="combobox">
                          <ul class="dropdown-menu inner" role="listbox" aria-expanded="true">
                            <li data-original-index="0" class="selected"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">无</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="1"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">外部链接</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">拔打电话</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li class="divider" data-original-index="3"></li>
                          </ul>
                       </div>
                       <select class="field form-control" data-type="pageselect" id="page" name="page" data-name="page" data-link="" data-value="empty" data-action="" tabindex="-98"> <option value="empty">无</option><option value="external">外部链接</option><option value="phone">拔打电话</option><option data-divider="true"></option></select>
                      </div> 
                    </div> 
                  </div>`;
            return html;
        },
        
        inputType:function(json,value){
            var value=value||json.value;
            var html='';
            html+='<div class="form-group '+json.cls+'" data-id="value">'
                +'<label class="'+json.labelcls+' control-label">'+json.label+'</label>'
                +'<div class="'+json.valuecls+'">'
                    +'<input class="form-control field" data-type="input" type="text" data-name="value" name="value" id="value" value="'+value+'">'
                +'</div>'
            +'</div>';
            return html;
        },
        groupType:function(json){
            var selr=this;
            var html='';
            html+='<div class="form-group '+json.cls+'">'
                    +'<label class=" '+json.labelcls+' control-label">'+json.label+'</label>'
                    +'<div class=" '+json.valuecls+' field group maingroup" >';
                $.each(json.value,function(index,item){
                    html+='<div class="box clearfix show ">'
                            +'<div class="btn-toolbar">'
                                    +'<div role="group" class="btn-group btn-group-xs btn-config"> '
                                            +'<button rel="copyHandler" class="btn btn-primary handler"><i class="fa fa-plus"></i></button>'
                                            +'<button rel="hideHandler" class="btn btn-primary handler"><i class="fa"></i> </button>'
                                    +'</div> '
                                    +'<div role="group" class="btn-group btn-group-xs btn-base">'
                                         +'<button rel="removeHandler" class="btn btn-danger handler"><i class="glyphicon glyphicon-remove"></i></button>'
                                    +'</div>'
                                +'</div>';
                    html+=selr.forInObj(item,json.fields,item.value); 
                    html+='</div>'


                               
                })

                     
                             
                      


            html+=    '</div>'
                 +'</div>';
            return html;
        },
        moduleStyleHtml:function(){
            var html='';
            html+='<div boxTab="moduleStyle">组件样式</div>';
            return html;
        },
        forInObj:function(obj,fields,value){
            var self=this;
            var html='';
            if(typeof obj==="object" && !(obj.constructor === Array)){
                for(var k in obj){
                    var value=value||'';
                    html+=self[self.typeObject[fields[k].type]](fields[k],value)
                        
                }
            }else{
                return alert("请输入对象obj")
            }
            return html;
        },



        moduleAnimationHtml:function(){
            var html='';
            html+='<div boxTab="moduleAnimation">组件动画</div>';
            return html;
        }



        
        


    };


    // 为了避免多次实例化
    $.fn.rightContentFrame = function rightContentFrame(option,value) {
        var retval;
        var $set = this.each(function () {
            var $this = $(this);
            var data = $this.data('makerui.rightContentFrame');
            var options = typeof option === 'object' && option;

            $this.data('makerui.rightContentFrame', (data = new RightContentFrame(this, options)));
            if (typeof option === 'string') retval = data[option](value);
        });
        return (retval === undefined) ? $set : retval;
    };
    
    $.fn.rightContentFrame.defaults = {
      isAnimate:false,
       
    };
    $.fn.rightContentFrame.Constructor = RightContentFrame;
    $.fn.rightContentFrame.noConflict = function () {
        $.fn.rightContentFrame = old;
        return this;
    }; 













}));